<template>
    <div class="notice">
        <div class="seventh">
            <div class="seventh-head">
                <h5 class="head1-h5">公告消息</h5>
                <h5 class="head2-h5 el-icon-back" @click="backhome"></h5>
            </div>

            <el-form :inline="true" :model="formInline" class="demo-form-inline"
                style="width: calc(100% - 300px); margin: 0 auto; margin-top: 50px;">
                <el-form-item style="float: left;">
                    <el-input v-model="formInline.search" placeholder="请输入关键词" @blur="search"></el-input>
                </el-form-item>
                <el-form-item style="float: right;">
                    <el-button type="primary" @click="beforeadd">添加</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="tableData" style="width: calc(100% - 300px);margin:0 auto ;margin-top: 100px;"
                :show-header="false">
                <el-table-column fixed align="left">
                    <template slot-scope="scope">
                        <span style="cursor: pointer;" class="con" @click="watch(scope.row)"><i
                                class="el-icon-position"></i>
                            <span style="color: #09B8A0;">[{{
                                scope.row.type }}]</span><span>{{ scope.row.con }}</span></span>
                    </template>
                </el-table-column>
                <el-table-column fixed label="操作" align="center" width="120">
                    <template slot-scope="scope">
                        <el-button @click="update(scope.row)" type="text" size="small"
                            style="cursor: pointer;">编辑</el-button>
                        <el-button type="text" size="small" @click="del(scope.row)" style="cursor: pointer;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[3, 5, 7, 9]" :page-size="count" layout="total, sizes, prev, pager, next, jumper"
                :total="total" align="center">
            </el-pagination>

            <!-- 详情弹出框 -->
            <el-dialog title="公告消息" :visible.sync="watchDialog" width="50%">
                <el-form :model="watchData" class="addDiv">
                    <el-form-item label="消息类型" :label-width="formLabelWidth">
                        <el-input v-model="watchData.title" autocomplete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="消息内容" :label-width="formLabelWidth">
                        <el-input v-model="watchData.content" autocomplete="off" type="textarea" :rows="12"
                            disabled></el-input>
                    </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="watchDialog = false">取 消</el-button>
                    <el-button type="primary" @click="watchDialog = false">确定</el-button>
                </span>
            </el-dialog>
            <!-- 添加弹出框 -->
            <el-dialog title="知识新增" :visible.sync="addDialog" width="50%">
                <el-form :model="addData" class="addDiv">
                    <el-form-item label="公告类型" style="margin-left: 30px;">
                        <el-select v-model="addData.type">
                            <el-option label="人事变更" value="人事变更"></el-option>
                            <el-option label="重要通知" value="重要通知"></el-option>
                            <el-option label="放假通知" value="放假通知"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="内容" :label-width="formLabelWidth">
                        <el-input v-model="addData.content" autocomplete="off" type="textarea" :rows="12"></el-input>
                    </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialog = false">取 消</el-button>
                    <el-button type="primary" @click="add">新增</el-button>
                </span>
            </el-dialog>


            <!-- 删除框 -->
            <el-dialog title="确定要删除吗？" :visible.sync="delDialog" width="30%">
                <span slot="footer" class="dialog-footer">
                    <el-button @click="delDialog = false">取 消</el-button>
                    <el-button type="primary" @click="suredel">确定</el-button>
                </span>
            </el-dialog>

            <!-- 修改弹出框 -->
            <el-dialog title="公告消息" :visible.sync="updateDialog" width="50%">
                <el-form :model="updateData" class="addDiv">
                    <el-form-item label="公告类型" style="margin-left: 30px;">
                        <el-select v-model="updateData.type">
                            <el-option label="人事变更" value="人事变更"></el-option>
                            <el-option label="重要通知" value="重要通知"></el-option>
                            <el-option label="放假通知" value="放假通知"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="消息内容" :label-width="formLabelWidth">
                        <el-input v-model="updateData.content" autocomplete="off" type="textarea" :rows="12"></el-input>
                    </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="updateDialog = false">取 消</el-button>
                    <el-button type="primary" @click="sureupdate">确定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            total: 8,
            page: 1,
            count: 5,
            updateDialog: false,
            delDialog: false,
            addDialog: false,
            watchDialog: false,
            formLabelWidth: '100px',
            tableData: [],
            watchData: {
                id: '',
                title: '标题',
                content: '内容内容内容内容内容内容内容内容内容内容内容内容'
            },
            formInline: {
                search: '',
            },
            addData: {
                id: '',
                type: '',
                content: ''
            },
            delData: {
                id: '',
                type: '',
                content: ''
            },
            updateData: {
                id: '',
                type: '',
                content: ''
            }
        }
    },
    methods: {
        watch(v) {
            this.watchDialog = true
            this.watchData.title = v.type
            this.watchData.content = v.con
        },
        backhome() {
            this.$router.push('/home/index')
        },
        search() {
            this.page = 1
            this.test()
        },
        handleCurrentChange(v) {
            this.page = v;
            this.test()
        },
        handleSizeChange(v) {
            this.count = v
            this.test()
        },
        test() {
            this.$axios({
                url: '/Notice',
                method: 'get',
                headers: {
                    'X-Total-Count': 'true' // 添加 X-Total-Count 头部
                },
                params: {
                    _limit: this.count,
                    _page: this.page,
                    q: `${this.formInline.search}`,
                    _sort: 'id',
                    _order: 'desc'
                }
            }).then(({ data, headers }) => {
                this.total = Number(headers['x-total-count'])
                this.tableData = data
            })
        },
        beforeadd() {
            this.addDialog = true
            this.$store.commit('changge', '')
        },
        add() {
            this.addDialog = false
            this.$axios({
                url: '/Notice',
                method: 'post',
                data: {
                    type: this.addData.type,
                    con: this.addData.content
                }
            }).then(({ data }) => {
                if (data.type) {
                    this.$store.commit('noticechange', data)
                    this.$store.commit('changge', 'NoticeRun')
                    this.$message({
                        message: '添加成功',
                        type: 'success',
                        duration: 1400
                    })
                    this.test()
                    this.addData.type = ''
                    this.addData.content = ''
                }
            })
        },
        del(v) {
            this.delData.id = v.id
            this.delDialog = true
        },
        suredel() {
            this.delDialog = false
            this.$axios({
                url: `/Notice/${this.delData.id}`,
                method: 'delete'
            }).then(({ data }) => {
                if (data) {
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        duration: 1400
                    })
                    if (this.tableData.length == 1 && this.page > 1) {
                        this.page--
                    }
                    this.test()
                }
            })
        },
        update(v) {
            this.updateData.id = v.id
            this.updateData.type = v.type
            this.updateData.content = v.con
            this.updateDialog = true
        },
        sureupdate() {
            this.updateDialog = false
            this.$axios({
                url: `/Notice/${this.updateData.id}`,
                method: 'patch',
                data: {
                    con: this.updateData.content,
                    type: this.updateData.type
                }
            }).then(({ data }) => {
                if (data) {
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                        duration: 1400
                    })
                    this.test()
                }
            })
        }
    },
    mounted() {
        this.test()
    }

}
</script>

<style lang="less" scoped>
.notice {
    padding: 10px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .seventh {
        width: 100%;
        height: 100%;
        background: white;
        box-shadow: 0px 3px 6px 0px #E1E1E1;
        box-sizing: border-box;

        .seventh-head {
            width: 100%;
            height: 40px;
            border-bottom: 1px solid #EBEEF5;

            .head1-h5 {
                height: 22px;
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 22px;
                float: left;
                margin-left: 20px;
                margin-top: 10px;
            }

            .head2-h5 {
                height: 17px;
                font-size: 20px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 600;
                color: #999999;
                line-height: 17px;
                float: right;
                margin-right: 20px;
                margin-top: 14px;
                cursor: pointer;
            }
        }
    }

    // 设置单行文本省略
    .con {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}
</style>